<template>
  <div class="contents">
    <div class="neworder">
      <p class="newOrder-title">
        <strong>.</strong>
        基本信息
      </p>
      <div class="new-order-main">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="客户">
            <el-autocomplete
              v-model="formData.user"
              placeholder="请输入内容"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="发货日期">
            <el-date-picker
              v-model="formData.date"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="采购类型">
            <el-select
              v-model="formData.time"
              placeholder=""
              style="width: 78px; margin-right: 5px;"
            >
              <el-option label="采购员" value="shanghai"></el-option>
              <el-option label="供应商" value="beijing"></el-option>
            </el-select>
            <el-select v-model="formData.type" placeholder="">
              <el-option label="采购员" value="shanghai"></el-option>
              <el-option label="供应商" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单员:">
            <span style="margin-right: 15px;">caigentuan</span>
            <el-checkbox>是否更新最近一次采购价</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <p class="newOrder-title">
        <strong>.</strong>
        收货信息
      </p>
      <div class="newOrder-address">
        <span>收货人：</span>
        <span></span>
        <span></span>
      </div>
      <div class="newOrder-title">
        <strong>.</strong>
        订购商品清单
        <div class="newOrder-operation">
          <span>智能录单</span>
          <span>从历史订单复制新增</span>
        </div>
      </div>
      <div class="new-order-main" style="border-bottom: none;">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="商品">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-plus"
                type="success"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input
              placeholder="输入订购数"
              style="width: 100px; margin-right: 20px;"
            ></el-input>
            <el-button type="success">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="商品图片"></el-table-column>
        <el-table-column label="商品名称"></el-table-column>
        <el-table-column label="描述"></el-table-column>
        <el-table-column label="单位"></el-table-column>
        <el-table-column label="现有库存"></el-table-column>
        <el-table-column label="下单数量"></el-table-column>
        <el-table-column label="下单单价"></el-table-column>
        <el-table-column label="下单小计"></el-table-column>
        <el-table-column label="最后一次进价"></el-table-column>
        <el-table-column label="最后一次下单"></el-table-column>
        <el-table-column label="备注"></el-table-column>
      </el-table>
      <div class="newOrder-amount">
        <span style="color: #666;">下单数量：</span>
        <span style="color: #666; margin-right: 10px;">0</span>
        <span>合计金额：¥</span>
        <span>0</span>
      </div>
      <div class="newOrder-remark" style="display: flex; align-items: center;">
        <div style="width: 80px;">订单备注</div>
        <el-input
          placeholder="输入订单备注"
          maxlength="64"
          show-word-limit
          style="width: 100%;"
        ></el-input>
      </div>
      <div class="newOrder-feature">
        <el-button type="success">保存现场采购订单</el-button>
        <el-button @click="goBack">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { handleActivePath } from '@/utils/routes'
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {
        formData: {
          user: '',
          date: '',
          time: '',
        },
        tableData: [],
      }
    },
    methods: {
      ...mapActions({
        delVisitedRoute: 'tabs/delVisitedRoute',
      }),
      async goBack() {
        const detailPath = await handleActivePath(this.$route, true)
        await this.$router.push('/order/orderlist')
        await this.delVisitedRoute(detailPath)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 5px 15px 0;

    .neworder {
      height: 400px;
      overflow: hidden auto;

      .newOrder-title {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        text-align: left;
        border-bottom: 1px solid #eee;
        margin: 0;

        .newOrder-operation {
          float: right;
          margin-right: 10px;
          vertical-align: middle;
          font-size: 14px;
          color: #03ac54;

          span:not(:last-child) {
            margin-right: 10px;
          }
        }
      }

      .new-order-main {
        position: relative;
        border-bottom: 8px solid #f5f5f5;
        width: 100%;
        padding: 15px 10px;
      }

      .newOrder-address {
        width: 100%;
        padding: 10px;
        text-align: left;
        border-bottom: 8px solid #f5f5f5;
      }

      .newOrder-amount {
        padding: 10px;
        text-align: right;
        font-size: 14px;
        color: #ed3f14;
      }

      .newOrder-remark {
        margin-top: 10px;
        width: 100%;
        height: 50px;
        padding: 0 10px;
        border-bottom: 8px solid #f5f5f5;
      }

      .newOrder-feature {
        text-align: left;
        padding: 15px;
        border-top: 1px solid #eee;
      }
    }
  }
</style>
